<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食评论查询</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        .camp_img{
            width: 200px;
            margin-right: 20px;
        }
        .search{
            width: 200px;
        }
        .header{
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
        .fenye {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="header">
    <el-input class="search" placeholder="请输入美食关键字："  clearable suffix-icon="el-icon-search" v-model="foodName"></el-input>
    <el-input class="search" placeholder="请输入描述关键字："  clearable suffix-icon="el-icon-search" v-model="describe"></el-input>
    <el-input class="search" placeholder="请输入评论关键字："  clearable suffix-icon="el-icon-search" v-model="comment"></el-input>
    <el-button type="primary" @click="selectFoodComment()">查询</el-button>
    </div>
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
<!--                        <img class="camp_img" :src="props.row.url" />-->
                        <el-form-item label="美食介绍">
                            <span>{{ props.row.describe }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label=美食名 prop="foodName">
            </el-table-column>
            <el-table-column label="评论时间" :formatter="dateFormat" prop="time">
            </el-table-column>
            <el-table-column label="评论人" prop="username">
            </el-table-column>
            <el-table-column label="评论内容" prop="comment">
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="fenye">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.dataCount">
        </el-pagination>
        </div>
    </template>
</div>
<script type="text/javascript">
    new Vue({
        el:"#div",
        data:{
            foodName:'',
            describe:'',
            comment:'',
            //定义集合存储营地信息
            tableData:[],
            page: {
                pageIndex:1,
                number:2,
                pageCount:null,
                dataCount:null
            },
            formatter:''
        },
        created:function () {
            this.selectFoodComment();
        },
        methods:{


            //查询营地信息
            selectFoodComment(){
                var _this = this;
                $.ajax({
                    url: "/selectComment",
                    type: "get",
                    data: {
                        "index":_this.page.pageIndex,
                        "number":_this.page.number,
                        "foodName":_this.foodName,
                        "describe":_this.describe,
                        "comment":  _this.comment
                    },
                    dataType: "json",
                    success: function(data) {
                        _this.tableData=data.list;
                        _this.page.pageIndex = data.obj.pageIndex;
                        _this.page.number = data.obj.number;
                        _this.page.pageCount = data.obj.pageCount;
                        _this.page.dataCount = data.obj.count;
                        console.log(data);
                    },
                    error: function(data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            //时间格式化2
            dateFormat:function(row,column){
                var t=new Date(row.time);//row 表示一行数据, updateTime 表示要格式化的字段名称
                var year=t.getFullYear(),
                    month=t.getMonth()+1,
                    day=t.getDate(),
                    hour=t.getHours(),
                    min=t.getMinutes(),
                    sec=t.getSeconds();
                var newTime=year+'-'+
                    (month<10?'0'+month:month)+'-'+
                    (day<10?'0'+day:day)+' '+
                    (hour<10?'0'+hour:hour)+':'+
                    (min<10?'0'+min:min)+':'+
                    (sec<10?'0'+sec:sec);
                return newTime;
            },


            handleEdit:function(index, row) {
                console.log(index, row);
            },
            handleDelete:function(index, row) {
                console.log(index, row);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.page.number = val;
                this.selectFoodComment();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page.pageIndex = val;
                this.selectFoodComment();
            },
            //模态框确认
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },
        watch:{

        }
    })
</script>
</body>
</html>